<template>
  <div class="relative w-full h-full overflow-y-auto">
    <PageHeader :title="t('goods_list.商品详情')">
      <template #right>
        <el-button type="primary" @click="goBack" size="small">
          <SvgIcon name="iconfanhui" color="#fff" class="mr4" />{{ t('goods_list.返回上级页面') }}
        </el-button>
      </template>
    </PageHeader>
    <div class="custom-table" v-loading="loading">
      <template v-if="sku.status === -1">
        <div class="titleRow">{{ t('service.驳回理由') }}</div>
        <div class="flex">
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">{{ t('service.驳回理由') }}</div>
            <div class="custom-table-value">
              {{ sku.rejectReason }}
            </div>
          </div>
        </div>
      </template>
      <div class="titleRow">{{ t('goods_list.基本信息') }}</div>
      <div class="flex">
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.商品标题') }}</div>
          <div class="custom-table-value">
            {{ sku["name" + locale] }}
          </div>
        </div>
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.商品分类') }}</div>
          <div class="custom-table-value">
            {{ sku["skuClassify1Name" + locale] }}->{{
              sku["skuClassify2Name" + locale]
            }}
          </div>
        </div>
      </div>

      <div class="flex">
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.所属商户') }}</div>
          <div class="custom-table-value">
            {{ sku["tenantName" + locale] }}
          </div>
        </div>
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.商品标签') }}</div>
          <div class="custom-table-value">
            {{ sku.attrs?.map((v) => v["name" + locale]).join(",") }}
          </div>
        </div>
      </div>

      <div class="flex">
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.商品发货地') }}</div>
          <div class="custom-table-value">
            {{ sku["deliveryDetail" + locale] }}
          </div>
        </div>
        <div class="custom-table-row flex1">
          <div class="custom-table-label" style="width: 200px">{{ t('goods_list.快递运费') }}</div>
          <div class="custom-table-value">
            ￥{{ sku.postage == 0 ? t('goods_list.包邮') : sku.postage }}
          </div>
        </div>
      </div>

      <div class="custom-table-row">
        <div class="custom-table-label" style="width: 200px">{{ t('goods_list.封面图') }}</div>
        <div class="custom-table-value">
          <el-image
            style="width: 100px; height: 100px"
            :src="sku.image"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[sku.image]"
            show-progress
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
        </div>
      </div>
      <div class="custom-table-row">
        <div class="custom-table-label" style="width: 200px">{{ t('goods_list.轮播图') }}</div>
        <div class="custom-table-value">
          <div class="flex_aic gap-10 flex-wrap">
            <el-image
              v-for="(img, index) in sku?.bannerImages?.split(',')"
              :key="index"
              style="width: 100px; height: 100px"
              :src="img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[img]"
              show-progress
              :initial-index="4"
              fit="cover"
              preview-teleported
            />
          </div>
        </div>
      </div>

      <div class="titleRow flex_aic_jcsb">
        <span>{{ t('goods_list.商品详情') }}</span>
        <el-button type="primary" v-if="!isEdit" @click="isEdit = !isEdit"
          >{{ t('goods_list.编辑') }}</el-button
        >
        <el-button type="primary" v-if="isEdit" @click="save">{{ t('goods_list.保存') }}</el-button>
      </div>
      <el-table :data="specDataList" border class="mt12 cover-table">
        <el-table-column :label="t('goods_list.序号')" type="index" width="80" />
        <el-table-column
          v-for="(item, index) in specList.filter((v) => v.info.length > 0)"
          :key="item.value"
          :label="item['label' + locale]"
        >
          <template #default="{ row }">
            {{ row[`spec_${item.value}`]?.["name" + locale] || "-" }}
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.原价')" prop="originalPrice" width="200">
          <template #default="{ row }">
            <el-input-number
              v-model="row.originalPrice"
              :placeholder="t('goods_list.请输入')"
              type="number"
              :min="0"
              controls-position="right"
              :disabled="!isEdit"
            />
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.价格')" prop="price" width="200">
          <template #header> {{ t('goods_list.价格') }}<span class="color-ff2b4e">{{ t('goods_list.*') }}</span> </template>
          <template #default="{ row }">
            <el-input-number
              v-model="row.price"
              :placeholder="t('goods_list.请输入')"
              type="number"
              :min="0"
              controls-position="right"
              :disabled="!isEdit"
            />
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.库存')" prop="stock" width="200">
          <template #header> {{ t('goods_list.库存') }}<span class="color-ff2b4e">{{ t('goods_list.*') }}</span> </template>
          <template #default="{ row }">
            <el-input-number
              v-model="row.stock"
              :placeholder="t('goods_list.请输入')"
              type="number"
              :min="0"
              controls-position="right"
              :disabled="!isEdit"
            />
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.货号')" prop="itemCode" width="120">
          <template #default="{ row }">
            <el-input
              v-model="row.itemCode"
              :placeholder="t('goods_list.请输入')"
              :disabled="!isEdit"
            />
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.开启状态')" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              :disabled="!isEdit"
            />
          </template>
        </el-table-column>
        <el-table-column :label="t('goods_list.默认选中')" width="100">
          <template #default="{ row }">
            <el-radio v-model="flag" :value="row.id" :disabled="!isEdit" />
          </template>
        </el-table-column>
      </el-table>

      <div class="titleRow">{{ t('goods_list.规格图片') }}</div>
      <div
        class="custom-table-row mt12"
        v-if="useImageIndex >= 0 && specList[useImageIndex]?.info?.length > 0"
        v-for="(item, index) in specList[useImageIndex]?.info || []"
        :key="index"
      >
        <div class="custom-table-label w-160 required">
          {{ item["name" + locale] }}
        </div>
        <div class="pb0 custom-table-value">
          <el-image
            style="width: 100px; height: 100px"
            :src="item.images"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[item.images]"
            show-progress
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
        </div>
      </div>

      <div class="titleRow">{{ t('goods_list.商品视频') }}</div>
      <div class="custom-table-row">
        <div class="custom-table-label w-160 required">{{ t('goods_list.视频') }}</div>
        <div class="pb0 custom-table-value">
          <!-- <UploadVideo v-model="sku.video" /> -->
          <video
            :src="sku.video"
            controls
            style="max-width: 500px; max-height: 500px"
            v-if="sku.video"
          ></video>
        </div>
      </div>

      <div class="titleRow">{{ t('goods_list.商品详情描述') }}</div>
      <div class="content" v-html="sku['content' + locale]"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Api from "@/config/api/api";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import {
  sku,
  specList,
  specDataList,
  initDetailData,
  flag,
  useImageIndex,
  rest,
  loading,
} from "./releaseStore2";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();
const route = useRoute();
const router = useRouter();
const isEdit = ref(false);
const goBack = () => {
  router.back();
};
onMounted(() => {
  initDetailData(route.query.id);
});
onUnmounted(() => {
  rest();
});
const save = () => {
  if (specDataList.value?.find((v) => v.id === flag.value && v.status == 0)) {
    ElMessage.error("默认选中的规格组合必须是开启状态！");
    return;
  }
  if (specDataList.value.some((item) => !item.price && item.price !== 0)) {
    ElMessage.error("请输入价格");
    return;
  }
  if (specDataList.value.some((item) => !item.stock && item.stock !== 0)) {
    ElMessage.error("请输入库存");
    return;
  }
  const params = {
    id: sku.value.id,
    stocks: specDataList.value?.map((v) => {
      return {
        id: v.stockId,
        stock: v.stock,
        price: v.price,
        status: v.status,
        flag: flag.value === v.id ? 1 : 0,
        itemCode: v.itemCode,
        originalPrice: v.originalPrice
      };
    }),
  };
  Api.sku_skuStock(params).then((res) => {
    if (res.status === 200) {
      ElMessage.success("操作成功！");
      isEdit.value = false;
      initDetailData(route.query.id);
    }
  });
};
</script>
<style lang="scss" scoped>
.titleRow {
  height: 36px;
  line-height: 36px;
  background: rgba(255, 120, 45, 0.05);
  border-radius: 3px;
  padding: 0 10px;
  margin-top: 12px;
  font-weight: 500;
  color: #333;
}

.content {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  min-height: 300px;
}
</style>
